<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="components-demo">
        <button-counter></button-counter>
        <br>
        <button-counter></button-counter>
        <br>
        <button-counter></button-counter>
    </div>

    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
    <blog-post title="Why Vue is so fun"></blog-post>

    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>

    <h3>{{ post.title }}</h3>

    <h3>{{ post.title }}</h3>
    <div v-html="post.content"></div>

    <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <div v-html="post.content"></div>
    </div>


    <button v-on:click="$emit('enlarge-text', 0.1)">
        Enlarge text
    </button>

    <blog-post ... v-on:enlarge-text="postFontSize += $event">

    </blog-post>

    <blog-post ... v-on:enlarge-text="onEnlargeText">

    </blog-post>

    <input v-model="searchText">

    <input v-bind:value="searchText" v-on:input="searchText = $event.target.value">

    <custom-input v-bind:value="searchText" v-on:input="searchText = $event">
    </custom-input>

    <custom-input v-model="searchText"></custom-input>

    <alert-box>
        Something bad happened.
    </alert-box>

    <!-- Component changes when currentTabComponent changes -->
    <component v-bind:is="currentTabComponent"></component>

    <table>
        <blog-post-row></blog-post-row>
    </table>

    <table>
        <tr is="blog-post-row"></tr>
    </table>


    <script>
        var buttonCounter = {
            count: 0
        }
        // Define a new component called button-counter
        Vue.component('button-counter', {
            data: function () {
                return buttonCounter;
            },
            template: '<button v-on:click="count++">\
            You clicked me {{ count }} times.</button>'
        })

        new Vue({ el: '#components-demo' })

        Vue.component('my-component-name', {
            // ... options ...
        })

        Vue.component('blog-post', {
            props: ['title'],
            template: '<h3>{{ title }}</h3>'
        })

        new Vue({
            el: '#blog-post-demo',
            data: {
                posts: [
                    { id: 1, title: 'My journey with Vue' },
                    { id: 2, title: 'Blogging with Vue' },
                    { id: 3, title: 'Why Vue is so fun' },
                ]
            }
        })

        new Vue({
            el: '#blog-posts-events-demo',
            data: {
                posts: [/* ... */],
                postFontSize: 1
            },
            methods: {
                onEnlargeText: function (enlargeAmount) {
                    this.postFontSize += enlargeAmount
                }
            }
        })

        Vue.component('custom-input', {
            props: ['value'],
            template: `<input
                v-bind:value="value"
                v-on:input="$emit('input', $event.target.value)">`
        })

        Vue.component('alert-box', {
            template: `<div class="demo-alert-box">
                    <strong>Error!</strong>
                    <slot></slot>
                </div>`
        })
    </script>
</body>

</html>